<template>
	<view>
		<!-- 头部切换 -->
		<view class="tab_nav">
			<view class="navBar" v-for="(item, index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<view class="nav-item" v-if="isActive == 0">
			<view>
			  <view class="item1">
				  <image :src="imgsrc"></image>
				  <text style="margin-left: 20rpx;">{{username}}</text>
				  <text style="margin-left: 423rpx;">{{status}}</text>
			  </view>
			  <view class="item2">
				  <text>下单时间：{{dateTime}}</text>
			  </view>
			  <view class="item3">
				 <view>
					 <image :src="img"></image>
				 </view> 
				 <view class="product-info">
					 <text style="font-size: 24rpx;color: #1A1A1A;">{{product}}</text>
					 <text style="font-size: 20rpx;color: #666666;">规格:规格一</text>
					 <text style="font-size: 24rpx;color: #1A1A1A;">￥{{price}} x1</text>
				 </view>
			  </view>
			  <view class="item4">
				  <text>展开</text>
			  </view>
			  <view class="item5">
				  <text>共{{num}}件</text>
				  <text style="margin-left: 30rpx;">￥{{totalprice}}</text>
			  </view>
			  <view class="item6">
				  <text>评价：无</text>
			  </view>
			</view>
		</view>
		<view class="nav-item" v-if="isActive == 1">
			待收货
		</view>
		<view class="nav-item" v-if="isActive == 2">
			待自提
		</view>
		<view class="nav-item" v-if="isActive == 3">
			已完成
		</view>
	</view>
</template>
<script>
export default {
	data(){
		return {
			isActive:0,
			navList:[
				{
					index:0,
					title:'全部'
				},
				{
					index:2,
					title:'待收货'
				},
				{
					index:3,
					title:'待自提'
				},
				{
					index:3,
					title:'已完成'
				}
			],
			imgsrc:require("../../static/left.png"),
			username:'张三三',
			status:'已完成',
			dateTime:'2021-03-29 11:22',
			img:require("../../static/meat.png"),
			product:'带皮五花肉（300g）',
			price:14.80,
			num:3,
			totalprice:44.81
		}
	},
	onLoad(){
	
	},
	methods:{
	 checked(index) {
		 this.isActive = index
	 }
	}
}
</script>
<style>
	page {
		background: rgb(245, 245, 245);
	}
	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tab_nav, .navBar {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
		background: #FFFFFF;
	}
	.active {
		position: relative;
		/* background: #FEB140; */
	}
	.active::after {
		content: "";
		position: absolute;
		width: 60rpx;
		height: 4rpx;
		background-color: #FEB140;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}
	.nav-item {
		width: 690rpx;
		height: 402rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx 30rpx 20rpx 30rpx;
	}
	.item1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
	}
	.item1 image {
		width: 40rpx;
		height: 40rpx;
	}
	.item2 {
		margin-left: 20rpx;
		font-size: 20rpx;
		color: #666666;
	}
    .item3 {
		display: flex;
		flex-direction: row;
		margin: 20rpx;
	}
	.item3 image {
		width: 80rpx;
		height: 80rpx;
	}
	.product-info {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
	}
	.item4 {
		font-size: 20rpx;
		color: #666666;
		text-align: center;
	}
	.item5 {
		font-size: 20rpx;
		color: #1A1A1A;
		margin-left: 498rpx;
		margin-top: 30rpx;
	}
	.item6 {
		margin-left: 20rpx;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		color: #1A1A1A;
	}
</style>
